<template>
    <div class="fullScreen" ref="record"> 
        <m-header :msg="type +'历史开奖'"></m-header>
        <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
            <div>
                <div class="flex-box flex-ac flex-pj bor-b-g record-pd" v-for="(item, i) in historyList" :key="i">
                    <div>
                        <div class="tx-s-12 tx-c-666 mar-tb">第{{ item.issue }}期 | 开奖时间:{{ item.openDate }}</div>
                        <div class="flex-box tx-c-wh" v-if="ename == 'xglhc'||ename == 'bflhc'">
                            <div class="circle-min tx-s-14" :class="[ colorCir[num.color] ]" v-for="(num, i) in item.haoma" :key="i">{{ num.number }}</div>
                        </div>
                        <div class="flex-box tx-c-wh" v-else>
                            <div class="circle-min tx-s-14 circle-R" v-for="(num, i) in item.number.split(',')" :key="i">{{ num }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </mescroll-vue>
    </div>
</template>
<script type="text/ecmascript-6">
    import 'common/css/lottery.css'
    import MHeader from '../components/m-header'
    import MescrollVue from 'mescroll.js/mescroll.vue'
    import { lottList } from '../common/js/axiosUtil' 
    export default {
        data () {
            return {
                type : '',
                ename : '',
                historyList : [], // 中奖纪录列表
                colorCir : {
                    R : 'circle-R', B : 'circle-B', G : 'circle-G'
                },
                mescroll: null, // mescroll实例对象
                //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
                mescrollUp: { // 上拉加载的配置.
                    page: {
                        num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                        size: 10 //每页数据条数,默认10
                    },
                    callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
                    htmlNodata: '<p class="upwarp-nodata">没有更多数据了</p>',
                    noMoreSize: 5 //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
                }
            }
        },
        created () {
            let data = this.$route.query.id
            this.type = data.type
            this.ename = data.ename
        }, 
        methods: {
            getHistoryList(page, rows){ 
                let time = JSON.stringify(new Date().getTime())
                let token = this.md5(time + '4baea6bc1bd66a7e00aa778d4aca6720')
                let params = new URLSearchParams()
                params.append('timeStamp', time)
                params.append('token', token)
                params.append('type', this.ename)
                params.append('page', page)
                params.append('rows', rows)
                lottList(params)
                .then((response)=> {
                    if(response.data.code == "200"){
                        let data = response.data.data
                        if(this.$isEmptyObject(data)){
                            if(page === 1){
                                // 没有数据时显示提示界面,隐藏下拉刷新和上拉加载的状态;
                                this.mescroll.endErr()
                                this.noData = true
                            }else{
                                // 上一页数据为10条本页数据为0时,显示提示信息并禁止上拉事件
                                this.$nextTick(() => {
                                    this.mescroll.endSuccess(data.length)
                                })
                            }
                        }else{
                            // 如果是第一页需手动制空列表
                            if (page === 1) {
                                this.historyList = []
                            }
                            // 把请求到的数据添加到列表
                            this.historyList = this.historyList.concat(data)
                            // 数据渲染成功后,隐藏下拉刷新的状态
                            this.$nextTick(() => {
                                this.mescroll.endSuccess(data.length)
                            })
                        }
                    } else {
                        this.mescroll.endErr()
                        this.$toast(response.data.msg, 2000)
                    }
                })
                .catch((error)=> {
                    // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                    this.mescroll.endErr()
                    this.$toast('请求服务失败', 2000)
                });
            },
            // mescroll组件初始化的回调,可获取到mescroll对象
            mescrollInit (mescroll) {
                this.mescroll = mescroll
            },
            // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
            upCallback (page) {
                this.getHistoryList(page.num, page.size)
            }
        },
        components: {
            MHeader,
            MescrollVue
        }
    }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
    /*通过fixed固定mescroll的高度*/
    .mescroll
        position: fixed
        top: 2.75rem
        bottom: 0
        height: auto 
    .record-pd
        background: white
        padding: 1rem .75rem
    .mar-tb
        margin : .5rem 0
</style>

